{"ast":null,"code":"import _slicedToArray from\"/Users/poppie/Desktop/development/messenger/app/frontend/node_modules/@babel/runtime/helpers/esm/slicedToArray.js\";import React,{useEffect}from\"react\";import{IconButton,Paper,TextField}from\"@mui/material\";import classNames from\"classnames\";import data from'@emoji-mart/data';import Picker from'@emoji-mart/react';import'./DialogInput.scss';import{jsx as _jsx}from\"react/jsx-runtime\";import{jsxs as _jsxs}from\"react/jsx-runtime\";var DialogInput=function DialogInput(props){var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),value=_React$useState2[0],setValue=_React$useState2[1];var _React$useState3=React.useState(''),_React$useState4=_slicedToArray(_React$useState3,2),textField=_React$useState4[0],setTextField=_React$useState4[1];var _React$useState5=React.useState(false),_React$useState6=_slicedToArray(_React$useState5,2),emojiPickerVisible=_React$useState6[0],setEmojiPickerVisible=_React$useState6[1];var maxSizeMessage=500;useEffect(function(){if(textField.length>0){setValue(true);}else{setValue(false);}},[textField]);var toggleEmojiPicker=function toggleEmojiPicker(){setEmojiPickerVisible(!emojiPickerVisible);};return/*#__PURE__*/_jsxs(Paper,{component:\"form\",className:\"dialogInput-form\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"dialogInput-emoji\",children:[/*#__PURE__*/_jsx(IconButton,{type:\"button\",className:\"dialogInput-form-smile\",onClick:function onClick(){return toggleEmojiPicker();}}),emojiPickerVisible&&/*#__PURE__*/_jsx(\"div\",{className:\"dialogInput__emoji-picker\",children:/*#__PURE__*/_jsx(Picker,{theme:\"light\",locale:\"ru\",data:data})})]}),/*#__PURE__*/_jsx(TextField,{className:classNames(\"dialogInput-form-input\",{\"dialogInput-form-input--error\":textField.length>maxSizeMessage}),onChange:function onChange(e){return setTextField(e.target.value);},variant:\"outlined\",label:textField.length>0&&\"\".concat(textField.length,\"/\").concat(maxSizeMessage)||null,multiline:true,rows:textField.length>maxSizeMessage*0.05?3:1,placeholder:\"\\u0412\\u0432\\u0435\\u0434\\u0438\\u0442\\u0435 \\u0441\\u043E\\u043E\\u0431\\u0449\\u0435\\u043D\\u0438\\u0435\",inputProps:{'aria-label':'Введите сообщение'}}),/*#__PURE__*/_jsx(IconButton,{type:\"button\",className:\"dialogInput-form-image\"}),/*#__PURE__*/_jsx(IconButton,{type:\"button\",className:\"dialogInput-form-document\"}),value&&/*#__PURE__*/_jsx(IconButton,{type:\"button\",className:\"dialogInput-form-send\"})||/*#__PURE__*/_jsx(IconButton,{type:\"button\",className:\"dialogInput-form-microphone\"})]});};export default DialogInput;","map":{"version":3,"names":["React","useEffect","IconButton","Paper","TextField","classNames","data","Picker","DialogInput","props","useState","value","setValue","textField","setTextField","emojiPickerVisible","setEmojiPickerVisible","maxSizeMessage","length","toggleEmojiPicker","e","target"],"sources":["/Users/poppie/Desktop/development/messenger/app/frontend/src/components/DialogInput/index.tsx"],"sourcesContent":["import React, {useEffect} from \"react\";\nimport {IconButton, Paper, TextField} from \"@mui/material\";\nimport {DialogInputProps} from \"../../models/props/DialogInputProps\";\nimport classNames from \"classnames\";\nimport data from '@emoji-mart/data'\nimport Picker from '@emoji-mart/react'\nimport './DialogInput.scss';\n\nconst DialogInput: React.FC<DialogInputProps> = (props) => {\n    const [value, setValue] = React.useState<boolean>(false);\n    const [textField, setTextField] = React.useState<string>('');\n    const [emojiPickerVisible, setEmojiPickerVisible] = React.useState<boolean>(false);\n\n    const maxSizeMessage = 500;\n\n    useEffect(() => {\n        if (textField.length > 0) {\n            setValue(true);\n        } else {\n            setValue(false);\n        }\n    }, [textField]);\n\n    const toggleEmojiPicker = () => {\n        setEmojiPickerVisible(!emojiPickerVisible);\n    }\n\n        return (\n                <Paper component=\"form\" className=\"dialogInput-form\">\n                    <div className=\"dialogInput-emoji\">\n                        <IconButton\n                            type=\"button\"\n                            className='dialogInput-form-smile'\n                            onClick={() => toggleEmojiPicker()}\n                        />\n                        {emojiPickerVisible && (\n                            <div className=\"dialogInput__emoji-picker\">\n                                <Picker theme=\"light\" locale=\"ru\" data={data}/>\n                            </div>\n                        )}\n                    </div>\n                    <TextField\n                        className={classNames(\"dialogInput-form-input\", {\n                            \"dialogInput-form-input--error\": textField.length > maxSizeMessage\n                        })}\n                        onChange={e => (setTextField(e.target.value))}\n                        variant=\"outlined\"\n                        label={((textField.length > 0 && `${textField.length}/${maxSizeMessage}`) || null)}\n                        multiline\n                        rows={(textField.length > maxSizeMessage * 0.05)? 3: 1}\n                        placeholder=\"Введите сообщение\"\n                        inputProps={{ 'aria-label': 'Введите сообщение' }}\n                    />\n                    <IconButton\n                        type=\"button\"\n                        className='dialogInput-form-image'\n                    />\n                    <IconButton\n                        type=\"button\"\n                        className='dialogInput-form-document'\n                    />\n                    {\n                        (value &&\n                            <IconButton\n                                type=\"button\"\n                                className='dialogInput-form-send'\n                            />) ||\n                            (<IconButton\n                                type=\"button\"\n                                className='dialogInput-form-microphone'\n                            />)\n                    }\n            </Paper>\n        );\n}\n\nexport default DialogInput;"],"mappings":"8IAAA,MAAOA,MAAK,EAAGC,SAAS,KAAO,OAAO,CACtC,OAAQC,UAAU,CAAEC,KAAK,CAAEC,SAAS,KAAO,eAAe,CAE1D,MAAOC,WAAU,KAAM,YAAY,CACnC,MAAOC,KAAI,KAAM,kBAAkB,CACnC,MAAOC,OAAM,KAAM,mBAAmB,CACtC,MAAO,oBAAoB,CAAC,wFAE5B,GAAMC,YAAuC,CAAG,QAA1CA,YAAuC,CAAIC,KAAK,CAAK,CACvD,oBAA0BT,KAAK,CAACU,QAAQ,CAAU,KAAK,CAAC,oDAAjDC,KAAK,qBAAEC,QAAQ,qBACtB,qBAAkCZ,KAAK,CAACU,QAAQ,CAAS,EAAE,CAAC,qDAArDG,SAAS,qBAAEC,YAAY,qBAC9B,qBAAoDd,KAAK,CAACU,QAAQ,CAAU,KAAK,CAAC,qDAA3EK,kBAAkB,qBAAEC,qBAAqB,qBAEhD,GAAMC,eAAc,CAAG,GAAG,CAE1BhB,SAAS,CAAC,UAAM,CACZ,GAAIY,SAAS,CAACK,MAAM,CAAG,CAAC,CAAE,CACtBN,QAAQ,CAAC,IAAI,CAAC,CAClB,CAAC,IAAM,CACHA,QAAQ,CAAC,KAAK,CAAC,CACnB,CACJ,CAAC,CAAE,CAACC,SAAS,CAAC,CAAC,CAEf,GAAMM,kBAAiB,CAAG,QAApBA,kBAAiB,EAAS,CAC5BH,qBAAqB,CAAC,CAACD,kBAAkB,CAAC,CAC9C,CAAC,CAEG,mBACQ,MAAC,KAAK,EAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,kBAAkB,wBAChD,aAAK,SAAS,CAAC,mBAAmB,wBAC9B,KAAC,UAAU,EACP,IAAI,CAAC,QAAQ,CACb,SAAS,CAAC,wBAAwB,CAClC,OAAO,CAAE,yBAAMI,kBAAiB,EAAE,EAAC,EACrC,CACDJ,kBAAkB,eACf,YAAK,SAAS,CAAC,2BAA2B,uBACtC,KAAC,MAAM,EAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAET,IAAK,EAAE,EAEtD,GACC,cACN,KAAC,SAAS,EACN,SAAS,CAAED,UAAU,CAAC,wBAAwB,CAAE,CAC5C,+BAA+B,CAAEQ,SAAS,CAACK,MAAM,CAAGD,cACxD,CAAC,CAAE,CACH,QAAQ,CAAE,kBAAAG,CAAC,QAAKN,aAAY,CAACM,CAAC,CAACC,MAAM,CAACV,KAAK,CAAC,EAAE,CAC9C,OAAO,CAAC,UAAU,CAClB,KAAK,CAAIE,SAAS,CAACK,MAAM,CAAG,CAAC,YAAOL,SAAS,CAACK,MAAM,aAAID,cAAc,CAAE,EAAK,IAAM,CACnF,SAAS,MACT,IAAI,CAAGJ,SAAS,CAACK,MAAM,CAAGD,cAAc,CAAG,IAAI,CAAG,CAAC,CAAE,CAAE,CACvD,WAAW,CAAC,mGAAmB,CAC/B,UAAU,CAAE,CAAE,YAAY,CAAE,mBAAoB,CAAE,EACpD,cACF,KAAC,UAAU,EACP,IAAI,CAAC,QAAQ,CACb,SAAS,CAAC,wBAAwB,EACpC,cACF,KAAC,UAAU,EACP,IAAI,CAAC,QAAQ,CACb,SAAS,CAAC,2BAA2B,EACvC,CAEGN,KAAK,eACF,KAAC,UAAU,EACP,IAAI,CAAC,QAAQ,CACb,SAAS,CAAC,uBAAuB,EACnC,eACD,KAAC,UAAU,EACR,IAAI,CAAC,QAAQ,CACb,SAAS,CAAC,6BAA6B,EACxC,GAEX,CAEpB,CAAC,CAED,cAAeH,YAAW"},"metadata":{},"sourceType":"module"}